body {
    background: #f2f3f7;
    margin: 8px;
    display: flex;
}
    
.dark .card {
    background: #1f2937;
    border-color: rgb(55 65 81);
    color: #fff;
}

.dark header.page {
    background-color: #1f2937;
}

.dark #vditor {
    --border-color: #fff5;
    --second-color: rgba(185, 185, 185, .36);
    --panel-background-color: #0f172a;
    --panel-shadow: 0 1px 2px rgba(255, 255, 255, .2);
    --toolbar-background-color: #1d2125;
    --toolbar-icon-color: #ffffff;
    --toolbar-icon-hover-color: #fff;
    --textarea-background-color: #2f363d;
    --textarea-text-color: #d1d5da;
    --resize-icon-color: var(--border-color);
    --resize-background-color: var(--second-color);
    --resize-hover-icon-color: var(--toolbar-icon-hover-color);
    --resize-hover-background-color: rgba(185, 185, 185, .86);
    --count-background-color: rgba(66, 133, 244, 0.36);
    --heading-border-color: var(--textarea-text-color);
    --blockquote-color: var(--toolbar-icon-color);
    --ir-heading-color: #9876aa;
    --ir-title-color: #808080;
    --ir-bi-color: #cc7832;
    --ir-link-color: #ffc66d;
    --ir-bracket-color: #287bde;
    --ir-paren-color: #6a8759;
}

.left-nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #fff;
    margin: 0;
    width: 200px;
    color: #334155;
    z-index: 99999;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 8%);
}

.dark {
    background-color: #0f172a
}

/*.card-shadow .card {
    border: 0;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 8%);
}*/

.card {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    color: #334155;
    border: 1px solid #e5e7eb;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 5%);
}

.no-margin {
    margin: 0 !important;
}

* {
    transition: all 1s, color 400ms, background 400ms, filter 300ms;
}

.grid {
    display: flex;
    flex-wrap: wrap;
}

@media (min-width: 1312px) {
    .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 {
        margin: 8px;
    }

    .c1 {
        width: calc(100% / 12 * 1 - 16px);
    }

    .c2 {
        width: calc(100% / 12 * 2 - 16px);
    }

    .c3 {
        width: calc(100% / 12 * 3 - 16px);
    }

    .c4 {
        width: calc(100% / 12 * 4 - 16px);
    }

    .c5 {
        width: calc(100% / 12 * 5 - 16px);
    }

    .c6 {
        width: calc(100% / 2 - 16px);
    }

    .c7 {
        width: calc(100% / 12 * 7 - 16px);
    }

    .c8 {
        width: calc(100% / 12 * 8 - 16px);
    }

    .c9 {
        width: calc(100% / 12 * 9 - 16px);
    }

    .c10 {
        width: calc(100% / 12 * 10 - 16px);
    }

    .c11 {
        width: calc(100% / 12 * 11 - 16px);
    }

    .c12 {
        width: calc(100% - 16px);
    }
}

@media (max-width: 1312px) {
    .cm1, .cm2, .cm3, .cm4, .cm5, .cm6, .cm7, .cm8, .cm9, .cm10, .cm11, .cm12 {
        margin: 8px;
    }

    .cm1 {
        width: calc(100% / 12 * 1 - 16px);
    }

    .cm2 {
        width: calc(100% / 12 * 2 - 16px);
    }

    .cm3 {
        width: calc(100% / 12 * 3 - 16px);
    }

    .cm4 {
        width: calc(100% / 12 * 4 - 16px);
    }

    .cm5 {
        width: calc(100% / 12 * 5 - 16px);
    }

    .cm6 {
        width: calc(100% / 2 - 16px);
    }

    .cm7 {
        width: calc(100% / 12 * 7 - 16px);
    }

    .cm8 {
        width: calc(100% / 12 * 8 - 16px);
    }

    .cm9 {
        width: calc(100% / 12 * 9 - 16px);
    }

    .cm10 {
        width: calc(100% / 12 * 10 - 16px);
    }

    .cm11 {
        width: calc(100% / 12 * 11 - 16px);
    }

    .cm12 {
        width: calc(100% - 16px);
    }
}

@media (max-width: 1023px) {
    .p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9, .p10, .p11, .p12 {
        margin: 8px;
    }

    .p1 {
        width: calc(100% / 12 * 1 - 16px);
    }

    .p2 {
        width: calc(100% / 12 * 2 - 16px);
    }

    .p3 {
        width: calc(100% / 12 * 3 - 16px);
    }

    .p4 {
        width: calc(100% / 12 * 4 - 16px);
    }

    .p5 {
        width: calc(100% / 12 * 5 - 16px);
    }

    .p6 {
        width: calc(100% / 2 - 16px);
    }

    .p7 {
        width: calc(100% / 12 * 7 - 16px);
    }

    .p8 {
        width: calc(100% / 12 * 8 - 16px);
    }

    .p9 {
        width: calc(100% / 12 * 9 - 16px);
    }

    .p10 {
        width: calc(100% / 12 * 10 - 16px);
    }

    .p11 {
        width: calc(100% / 12 * 11 - 16px);
    }

    .p12 {
        width: calc(100% - 16px);
    }
}

@media (max-width: 672px) {
    .m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10, .m11, .m12 {
        margin: 8px;
    }

    .m1 {
        width: calc(100% / 12 * 1 - 16px);
    }

    .m2 {
        width: calc(100% / 12 * 2 - 16px);
    }

    .m3 {
        width: calc(100% / 12 * 3 - 16px);
    }

    .m4 {
        width: calc(100% / 12 * 4 - 16px);
    }

    .m5 {
        width: calc(100% / 12 * 5 - 16px);
    }

    .m6 {
        width: calc(100% / 2 - 16px);
    }

    .m7 {
        width: calc(100% / 12 * 7 - 16px);
    }

    .m8 {
        width: calc(100% / 12 * 8 - 16px);
    }

    .m9 {
        width: calc(100% / 12 * 9 - 16px);
    }

    .m10 {
        width: calc(100% / 12 * 10 - 16px);
    }

    .m11 {
        width: calc(100% / 12 * 11 - 16px);
    }

    .m12 {
        width: calc(100% - 16px);
    }
}

.input {
    padding: 0.75rem 1rem;
    border: 1px solid #E5E7EBFF;
    border-radius: 5px;
    color: #000;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-color: #fff;
    margin: .5em;
    outline: none;
    width: calc(100% - 1em - 2rem - 2px);
}

.input:focus {
    border: 1px solid #0a76fa !important;
}

.dark .input {
    background-color: #0f172a;
    color: #fff;
    border: 1px solid #374151;
}

.dark .btn {
    background-color: #0f172a;
    color: #ffffffab;
    border: 1px solid #374151;
}

.btn {
    padding: .75rem;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 1%);
    border-radius: 5px;
    border: 1px solid #E5E7EBFF;
    background-color: #fff;
    outline: none;
    color: #4B5563;
}

.color-blue-full {
    background-color: #3B82F6 !important;
    color: #fff !important;
    border: 1px solid #3B82F6 !important;
}

.color-blue {
    background-color: #fff !important;
    color: #3B82F6FF !important;
    border: 1px solid #3B82F6 !important;
}